/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

import checkFileSize from '@/components/_pages/handleFeedBack/utils';
import { PlusOutlined } from '@ant-design/icons';
import UploadWithCrypto from '@base/components/upload-width-crypto';
import { Form, Input, Modal, message } from 'antd';
import React, { useEffect, useState } from 'react';

interface OkParams {
  reason?: string;
  path?: string;
}

interface CancelModalProps {
  open: boolean;
  onOk: (params: OkParams) => void;
  onCancel: () => void;
}

const CancelModal: React.FC<CancelModalProps> = (props) => {
  const { open, onOk, onCancel } = props;

  const [filesList, setFilesList] = useState<any[]>([]);

  const [form] = Form.useForm();

  const handleOk = () => form.submit();

  const onSubmit = () => {
    form.validateFields().then((res) => {
      const { reason, files } = res;
      const { file } = files || {};
      const { response } = file || {};
      const { data: path } = response || {};
      if (!reason && !path) {
        message.error('请填写备注或者上传图片');
        return;
      }
      onOk({
        reason,
        path,
      });
    });
  };

  const handleChange = (file: any) => {
    const { fileList } = file;
    setFilesList(fileList);
  };

  useEffect(() => {
    if (open) {
      form.resetFields();
      setFilesList([]);
    }
  }, [open]);

  return (
    <Modal title='退款凭证' open={open} onCancel={onCancel} onOk={handleOk}>
      <Form form={form} onFinish={onSubmit}>
        <Form.Item name='reason' label='备注'>
          <Input.TextArea placeholder='请输入备注' maxLength={200} showCount allowClear />
        </Form.Item>
        <Form.Item
          name='files'
          label='图片上传'
          help='点击上传，最多上传1张'
          validateTrigger={filesList}
        >
          <UploadWithCrypto
            maxCount={1}
            action='/regiment/OrderMonitor/picUpload'
            name='file'
            listType='picture-card'
            accept='image/png, image/jpeg, image/jpg,'
            multiple={false}
            fileList={filesList}
            onChange={handleChange}
            beforeUpload={checkFileSize}
            showUploadList={{ showPreviewIcon: false }}
          >
            {filesList.length >= 1 ? null : (
              <div style={{ color: '#4ca4f8' }}>
                <PlusOutlined />
              </div>
            )}
          </UploadWithCrypto>
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CancelModal;
